<template>
    <el-dialog v-model="dialogFormVisible" title="修改账户信息" width="500">
        <el-form :model="formData">
        <el-form-item label="账号名" :label-width="formLabelWidth">
            <el-input v-model="formData.account" autocomplete="off" />
        </el-form-item>
        <el-form-item label="用户组" :label-width="formLabelWidth">
            <el-select v-model="formData.userGroup" placeholder="Please select a zone">
            <el-option label="超级管理员" value="超级管理员" />
            <el-option label="普通管理员" value="普通管理员" />
            </el-select>
        </el-form-item>
        </el-form>
        <template #footer>
        <div class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取消</el-button>
            <el-button type="primary" @click="accountEditSubmit">
                确认
            </el-button>
        </div>
        </template>
    </el-dialog>
    <el-table 
        ref="multipleTableRef"
        :data="goodsListData.tableData"
        row-key="id"
        style="width: 100%"
    >
        <el-table-column type="expand">
        <template #default="props">
            <el-form label-position="left" inline class="demo-table-expand">
                <el-form-item label="商品 ID">
                    <span>{{ props.row.id }}</span>
                </el-form-item>
                <el-form-item label="商品名称">
                    <span>{{ props.row.name }}</span>
                </el-form-item>
            </el-form>
        </template>
        </el-table-column>
        <el-table-column label="商品名称" width="120">
            <template #default="scope">{{ scope.row.name }}</template>
        </el-table-column>
        <el-table-column label="商品分类" width="120">
            <template #default="scope">{{ scope.row.category }}</template>
        </el-table-column>
        <el-table-column label="商品价格" width="120">
            <template #default="scope">{{ scope.row.price }}</template>
        </el-table-column>
        <el-table-column label="商品图片" width="120">
            <template #default="scope"><img :src="baseURL+scope.row.imgUrl" alt="" class="goodsItemImg"></template>
        </el-table-column>
        <el-table-column label="商品描述" width="120">
            <template #default="scope">{{ scope.row.goodsDesc }}</template>
        </el-table-column>
        <el-table-column label="操作">
            <template #default="scope">
                <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
                    编辑
                </el-button>
                <el-button
                    size="small"
                    type="danger"
                    @click="handleDelete(scope.$index, scope.row)"
                >
                    删除
                </el-button>
            </template>
        </el-table-column>
    </el-table>
    <div class="demo-pagination-block">
        <el-pagination
        v-model:current-page="goodsListData.currentPage"
        v-model:page-size="goodsListData.pageSize"
        :page-sizes="[5, 10, 15, 20]"
        :size="size"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="goodsListData.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        />
    </div>
</template>
  
<script setup>
    import { goodsList } from '@/api/goods'
    import { goodsDel } from '@/api/goods'
    import { reactive,ref } from 'vue'
    import dayjs from 'dayjs'
    import { baseURL } from '@/utils/common.js';
    import { useRouter } from 'vue-router';
    import { useGoodsStore } from '@/store/modules/goods';
    const goodsStore = useGoodsStore()
    const router = useRouter()
    const size = ref('default')
    const background = ref(false)
    const disabled = ref(false)
    const dialogFormVisible = ref(false)
    const formLabelWidth = '140px'
    const selectData = ref([])
    const formData = reactive({
        id: '',
        account: '',
        userGroup: '',
    })
    const goodsListData = reactive({
        currentPage: 1,
        pageSize: 5,
        tableData: [],
        total: 0,
    })

    const start=()=>{
        goodsList({ currentPage: goodsListData.currentPage, pageSize: goodsListData.pageSize}).then(res=>{
            res.data.forEach(item => {
                item.ctime = dayjs(item.ctime).format("YYYY-MM-DD");
            })
            goodsListData.tableData = res.data
            goodsListData.total = res.total
        })
    }
    start()


    const handleSizeChange = (val) => {
        goodsListData.pageSize = val
        start();
    }


    const handleCurrentChange = (val) => {
        goodsListData.currentPage = val
        start();
    }


    const handleEdit = (index, row) => {
        goodsStore.setGoodsInfo(row)
        router.push('/edit/'+row.id)
        
    }

    const goodsEditSubmit = () => {
        
    }
    const handleDelete = (index, row) => {
        goodsDel({ id: row.id }).then(res => {
            if (res.code === 0) {
                ElMessage.success(res.msg);
                start();
            }else {
                ElMessage.error(res.msg);
            }
        })
    }

</script>

<style lang="scss" scoped>
    .demo-pagination-block{
        height: 100px;
        margin-top: 20px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: space-between;
        padding-left: 40px;
    }
    .goodsItemImg{
        width: 50px;
        height: 50px
    }
    :deep(.el-table__row){
        height: 58px;
    }
</style>